<template>
  <div id="reportGroup">
    <el-row style="padding: 20px">
      <el-col :span="4">
        <el-button type="primary" @click="goBack()">返回上一层</el-button>
      </el-col>
      <el-col :span="16"><h3>银行卡管理的商户组列表</h3></el-col>

    </el-row>
    <el-row>
      <el-table :data="tableData" style="width: 100%" height="400" v-loading="loading">
        <el-table-column prop="id" label="ID" width="80">
        </el-table-column>
        <el-table-column prop="name" label="商户组名">
        </el-table-column>
        <el-table-column label="商户管理">
          <template slot-scope="scope">
            <el-button type="text" size='mini' @click="goReport(scope.row)">商户管理</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block" style="text-align: right;padding-right: 40px;">

        <el-pagination :current-page.sync="pageNumber" @current-change='handleChange' :page="pageNumber"
                       :page-size="pageSize" layout="total, prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </el-row>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        tableData: [{
          id: 2,
          name: 'kjk'
        }],
        loading: false,
        pageSize: 10,
        pageNumber: 1,
        total: 1
      }
    },
    created () {
      this.getGroupList()
    },
    methods: {
      getGroupList () {
        this.loading = true
        // let params = {
        //   pageSize: this.pageSize,
        //   pageNumber: this.pageNumber
        // }
        this.$api.getBusinessGroupList(this.$route.query.id).then(res => {
          if (res.code == '000000') {
            console.log(res.data);
            this.tableData = res.data;
            this.total = res.data.length;
            this.$message.success('获取商户组列表成功');
            this.loading = false;
          }
        })
      },
      goReport (row) {
        this.$router.push({
          path: '/bank/mangeList',
          query: {
            name: row.name,
            id: row.id
          }
        })
      },
      goBack () {
        this.$router.go(-1)
      },
      handleChange (val) {
        this.pageNumber = val
        this.getGroupList()
      }
    }
  }
</script>

<style lang="less">
  #reportGroup {
    th {
      text-align: center;
    }
  }
</style>
